import { createStore, Module } from 'vuex'

import { userStore, UserStore, UserState } from './modules/user'
import {
  permissionStore,
  PermissionState,
  PermissionStore
} from './modules/permission'
import { App } from 'vue'

export interface RootState {
  user: UserState
  permission: PermissionState
}

export type Store = UserStore<Pick<RootState, 'user'>> &
  PermissionStore<Pick<RootState, 'permission'>>

const store = createStore({
  mutations: {},
  actions: {},
  getters: {
    token: (state: RootState) => state.user.token,
    roles: (state: RootState) => state.user.roles,
    dynamicRoutes: (state: RootState) => state.permission.dynamicRoutes
  },
  modules: {
    user: userStore,
    permission: permissionStore
  }
})

export function useStore(): Store {
  return store as Store
}

export function setupStore(app: App<Element>) {
  app.use(store)
}

export default store
